<!--
 * @Author: LiZhiWei
 * @Date: 2025-07-29 14:48:43
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-29 17:46:13
 * @Description: 
-->
<template>
  <el-dialog
    :model-value="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    :title="title"
    :width="formWidth"
    @close="handleClose"
  >
    <div v-loading="loading" class="show-detail">
      <slot :columns="columns" :data="model" name="shower_detail">
        <ShowerEmbed :column="column" :columns="columns" :detail="model" :border="true">
          <template v-for="(_, name) in $slots" #[name]="slotData">
            <slot :name="name" v-bind="slotData"></slot>
          </template>
        </ShowerEmbed>
      </slot>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
  import { useShower } from '#/hooks/useShower'

  defineOptions({
    name: 'Shower',
  })

  const props = withDefaults(
    defineProps<{
      column?: number
      entity?: string
      entityId?: number | string
      formSize: string
      requestUrl?: RequestUrl
      title?: string
      visible: boolean
    }>(),
    {
      title: '详情',
      visible: false,
      column: 1,
      formSize: 'small',
      entityId: '',
      entity: '',
      requestUrl: () => ({}) as RequestUrl,
    }
  )

  const emits = defineEmits<{
    (e: 'update:visible', visible: boolean): void
  }>()
  const { visible } = toRefs(props)
  const { model, columns, loading, fetchData, fetchDataWith } = useShower({
    entity: props.entity,
    url: props.requestUrl,
  })
  const handleClose = () => {
    emits('update:visible', false)
  }

  //   const loading = ref(true)
  //   const columns = ref([])
  //   const model = ref({})

  const formWidth = computed(() => {
    const width = { large: '70vw', small: '50vw', mini: '38vw' }
    return width[props.formSize]
  })

  watch(
    () => props.visible,
    (newV) => {
      if (newV) {
        props.requestUrl?.show
          ? fetchDataWith({
              show: props.requestUrl?.show(props.entityId),
              params: props.requestUrl.params,
            })
          : fetchData({ id: props.entityId })
      }
    }
  )
</script>

<style lang="scss">
  .show-detail {
    @apply pt-30px pb-40px px-40px overflow-y-auto;

    min-height: 100px;
    max-height: 60vh;

    .shower-image {
      min-width: 128px;
    }
  }
</style>
